<template>
  <div class="box">
    <!-- 人才详情 -->
    <div class="back">
      <!-- <span @click="back()">返回上一级></span> -->
    </div>
    <div class="vflex xs12">
      <div class="aside">
        <div
          v-loading="loading"
          class="logo">
          <img v-if="info['avatar'] && info['avatar']!==''" :src="info['avatar']" alt="">
          <img v-else src="../../../../assets/img/default-user.png" alt="" style="width: 80%">
        </div>
        <div class="info-box">
          <h4>{{info['name']}}</h4>
          <!-- <button class="collect"><i class="el-icon-plus"></i><span>关注</span></button> -->
          <p class="tags">
            <span class="tag">{{info['companyName']}}
                <!-- {{info.info && info.info.an}} -->
                <!-- <span v-if="isSubMechanism">(子机构)</span> -->
            </span>
            <!-- <span class="tag">{{info.jobs && info.jobs.join('、')}}</span> -->
          </p>
          <!-- <ul class="list clearfix">
            <!-- <li><span class="tit w80">所属单位：</span>{{info.info && info.info.an}}<span v-if="isSubMechanism">(子机构)</span></li> -->
            <!-- <li><span class="tit">归属地：</span>{{info['address']}}</li> -->
            <!-- <li><span class="tit w80">职务：</span>{{info.jobs && info.jobs.join('、')}}</li> --
          </ul> -->
          <ul class="list clearfix">
            <!-- <li><span class="tit w80">联系方式：</span>{{info['email'] || info['phone']}}</li> -->
            <li><span class="tit w96">专利申请量：</span>{{$route.query.count}}</li>
            <!-- <li><span class="tit w80">科研星级：</span>
              <el-rate
                v-model="star"
                :allow-half="true"
                disabled
                disabled-void-icon-class="el-icon-star-off"
                class="elrate">
              </el-rate>
            </li> -->
          </ul>
          <!-- 收藏 -->
          <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="!isCollect ? '收藏' : '取消收藏'"
            placement="top">
            <a
              class="collect-icon"
              :class="{ highlight: isCollect, 'el-icon-star-on': isCollect, 'el-icon-star-off': !isCollect }"
              @click="collect()"
            ></a>
          </el-tooltip> -->
        </div>
      </div>
      <div class="content">
        <div class="nav">
          <div :class="{ active: active == 0 }" @click="handleSelect('EnergyTalentDetailIntroduction', 0)">
            <h6>人才简介</h6>
          </div>
          <div :class="{ active: active == 1 }">
            <h6>科创能力<i class="icon1 el-icon-caret-bottom"></i></h6>
            <div class="menu-box">
              <el-menu
                class="nav-menu"
                :default-active="onRoutes"
                text-color="#86899e"
                active-text-color="#504da6"
                @select="handleSelect"
              >
                <el-menu-item
                  v-for="(item, index) in nav1"
                  :key="index"
                  :index="item.index"
                >
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <div :class="{ active: active == 2 }" @click="handleSelect('EnergyTalentDetailAssociated', 2)">
            <h6>关联企业</h6>
          </div>
          <div :class="{ active: active == 3 }" @click="handleSelect('EnergyTalentDetailInfluence', 3)">
            <h6>社会影响力</h6>
          </div>
        </div>
        <div>
          <router-view :info="info" :bio="bio"></router-view>
        </div>
        
        <!-- 

        <div class="card-box">
          <!-- 研究成果 --
          <el-card class="elcard" style="flex:1;align-self:normal;">
            <div slot="header" class="hd clearfix">
              <span class="tit">研究成果</span>
            </div>
            <ResearchResult :info="info"/>
          </el-card>
        </div> -->

      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { numFormat } from '@/utils/utils'
import ResearchResult from './ResearchResult'
export default {
  components: {
    ResearchResult
  },
  data() {
    return {
      info: {},
      bio: 'loading',
      active: 0,
      nav1: [],
      origin: -1,
      loading: true,
      star: 0,
      emptyText: '数据加载中...',
      isSubMechanism: false, // 是否是子机构
      isCollect: false,
    }
  },
  computed: {
    onRoutes() {
      return this.$route.name;
    },
    ...mapState(['companyNameAndEid'])
  },
  methods: {
    init() {
      this.nav1 = [
        {
          index: "EnergyTalentDetailSituation",
          name: "科研概况"
        },
        {
          index: "EnergyTalentDetailAchievement",
          name: "科研成果"
        },
      ]

      // 当前页面导航
      let routerName = this.$route.name
      let nav = [
        [{index: 'EnergyTalentDetailIntroduction', name: '人才简介'}],
        this.nav1,
        [{index: 'EnergyTalentDetailAssociated', name: '关联企业'}],
        [{index: 'EnergyTalentDetailInfluence', name: '社会影响力'}],
      ]
      outer: for (let i=0; i<nav.length;i++) {
        for (let j=0; j<nav[i].length; j++) {
          if (routerName === nav[i][j].index) {
            this.active = Number(i)
            break outer
          }
        }
      }

      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      // 获取人才信息
      this.getTalentsInfo()
      // 获取科研星级
      // this.getTalentsScore()
      // 获取当前公司是否已收藏
      this.isCompanyCollect()
    },
    handleSelect(val, index) {
      if (val !== 'EnergyTalentDetailIntroduction'
        && val !== 'EnergyTalentDetailAssociated'
        && val !== 'EnergyTalentDetailInfluence') {
        let that = this;
        fn(this.nav1, 1)
        function fn(data, n) {
          for (let i = 0; i < data.length; i++) {
            // 判断第二层
            if (data[i].subs) {
              for (let j = 0; j < data[i].subs.length; j++) {
                if (data[i].subs[j].index == val) {
                  that.active = n;
                  break;
                }
              }
              //判断第一层
            } else if (data[i].index == val) {
              that.active = n;
              break;
            }
          }
        }
      } else {
        this.active = index
      }
      this.$router.push({
        name: val,
        query: this.$route.query
      });
      if (val === 'EnergyTalentDetailIntroduction') {
        // 获取人才信息
        this.getTalentsInfo()
      }
    },
    // 获取人才信息
    getTalentsInfo() {
      this.$get(this.$Url.team.talentsInfo, {
        pid: this.info.key
      }).then(res => {
        this.loading = false
        let result = res.data && res.data.result && res.data.result[0]
        if (!result) {
          this.bio = ''
        } else {
          let bio = result['bio'] || ''
          if (bio === '') {
            this.$get(this.$Url.EnergyTalent.getExpertIntroduction, {
              name: this.info.name,
              companyName: this.info.companyName
            }).then(res => {
              let data = res.data
              this.bio = data || ''
            }).catch(err => {})
          } else {
            this.bio = bio
          }
        }
        this.$set(this.info, 'avatar', result['avatar'] || '')
      }).catch(err => {})
    },
    // 获取科研星级
    getTalentsScore() {
      this.$get(this.$Url.team.talentsScore, {
        id: this.info.key
      }).then(res => {
        let data = res.data
        if (data) {
          this.star = data / 100 * 5
        }
      }).catch(err => {})
    },
    // 获取当前公司是否已收藏
    isCompanyCollect() {
      this.$get(this.$Url.EnergyTalent.isCollect, {
        pid: this.info.key
      }).then(res => {
        let data = res.data
        this.isCollect = data
      }).catch(err => {})
    },
    // 收藏
    collect() {
      let pid = this.$route.query.key
      if (this.isCollect) {
        // 取消收藏
        this.$get(this.$Url.EnergyTalent.cancelCollectExpert, {
          pid
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "取消收藏成功"
            });
            this.isCollect = !this.isCollect
          } else {
            this.$message({
              type: "error",
              message: "取消收藏失败",
              duration: 1000
            });
          }
        }).catch(e => {console.log(e);});
      } else {
        this.$get(this.$Url.EnergyTalent.collectExpert, {
          pid
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "收藏成功",
              duration: 1000
            });
            this.isCollect = !this.isCollect
          } else {
            this.$message({
              type: "error",
              message: "收藏失败",
              duration: 1000
            });
          }
        }).catch(e => {console.log(e);});
      }
    },
    back() {
      // this.$router.push({
      //   name: 'EnergyTalentList'
      // })
      this.$router.go(-1);
    }
  },
  beforeMount() {
    this.origin = this.$route.query.origin || 0
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss">
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  .el-card__header {
    position: relative;
    &:before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 5px;
      height: 30px;
      margin-top: -15px;
      content: '';
      background-color: $color101;
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    color: $color126;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.box {
  position: relative;
  // .back {
  //   position: relative;
  //   width: 100%;
  //   padding: .1rem .1rem;
  //   text-align: left;
  //   span {
  //     font-size: .14rem;
  //     cursor: pointer;
  //   }
  // }
  .aside {
    width: 3.2rem;
    min-height: calc(100vh - .7rem);
    padding: 0 .2rem;
    box-sizing: border-box;
    background-color: $color83;
    .logo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      // width: 1.34rem;
      // height: 1.34rem;
      max-width: 1.5rem;
      height: 1.5rem;
      // border: 1px solid #d9e0ee;
      margin: .3rem auto .2rem;
      background-color: transparent;
      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        // width: 100%;
        // height: 100%;
      }
      .el-loading-mask {
        background-color: transparent !important;
      }
    }
    .info-box {
      position: relative;
      width: 100%;
      h4 {
        position: relative;
        width: 100%;
        margin-bottom: .2rem;
        font-size: .18rem;
        text-align: center;
        vertical-align: middle;
        color: $color2;
        .pop-title {
          display: inline-block;
          line-height: .34rem;
          padding: 0 .2rem;
          margin-left: .1rem;
          margin-bottom: .1rem;
          margin-right: .1rem;
          border: 1px solid #6562D9;
          border-radius: 20px;
          box-sizing: border-box;
          font-weight: normal;
          font-size: .14rem;
          cursor: pointer;
        }
      }
      .collect {
        position: absolute;
        top: 0;
        right: 0;
        width: 1rem;
        height: .36rem;
        border-radius: 6px;
        color: #6f6dd8;
        text-align: left;
        font-weight: bold;
        background-color: #e7e7fc;
        outline: none;
        i {
          display: inline-block;
          margin-left: .2rem;
          margin-right: .14rem;
          font-size: .16rem !important;
          vertical-align: text-bottom;
        }
        span {
          display: inline-block;
          font-size: .14rem;
          vertical-align: middle;
        }
      }
      .list {
        display: block;
        padding-left: 0;
        margin-bottom: .02rem;
        list-style: none;
        li {
          display: block;
          line-height: .3rem;
          // float: left;
          // width: 33.33%;
          margin-bottom: .1rem;
          font-size: .16rem;
          color: $color2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // &:nth-child(1) {
          //   width: 46%;
          // }
          // &:nth-child(2) {
          //   width: 27%;
          // }
          // &:nth-child(3) {
          //   width: 27%;
          // }
          .tit {
            display: inline-block;
            width: .6rem;
            color: $color2;
          }
        }
        .abs {
          width: 100%;
          line-height: .24rem;
          font-size: .14rem;
          color: $color2;
          .tit {
            display: inline-block;
            font-size: .16rem;
            color: $color2;
          }
        }
      }
    }
  }
  .content {
    position: relative;
    width: calc(100% - 3.4rem);
    padding-left: .2rem;
    padding-top: .2rem;
    box-sizing: border-box;
    background-color: $color46;
    .nav {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: .5rem;
      margin-bottom: .1rem;
      text-align: center;
      font-size: .14rem;
      color: #4f515b;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      background-color: #f3f6f9;
      h6 {
        font-size: .18rem;
        i {
          display: inline-block;
          margin-left: .05rem;
          font-size: .16rem;
        }
        .icon1 {
          display: inline-block;
          transition: all .2s ease;
        }
        // .icon2 {
        //   display: none;
        // }
      }
      & > div {
        position: relative;
        flex: 1;
        height: .5rem;
        line-height: .5rem;
        cursor: pointer;
        &:hover {
          .icon1 {
            // display: none;
            transform: rotate(180deg);
          }
          // .icon2 {
          //   display: inline-block;
          // }
          .menu-box {
            display: block;
          }
        }
        &.active {
          color: #fff;
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
          // background-color: rgba(80,77,165,0.9);
          background-color: $mainColor;
        }
        .menu-box {
          position: absolute;
          top: .5rem;
          z-index: 9;
          display: none;
          width: 100%;
          .nav-menu {
            position: relative;
            width: 100%;
            margin-top: .14rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
            font-size: .16rem;
            font-weight: bold;
            &.active {
              display: block;
            }
            &:before {
              position: absolute;
              top: -.09rem;
              left: 50%;
              display: block;
              width: 0;
              height: 0;
              border-color: transparent;
              border-width: 10px;
              border-top-width: 0;
              border-bottom-color: #fff;
              border-style: solid;
              margin-left: -.1rem;
              content: " ";
            }
            ::v-deep {
              .el-menu-item {
                font-size: .16rem;
                span {
                  font-size: .16rem;
                }
              }
              .el-submenu__title {
                font-size: .16rem;
              }
            }
          }
        }
      }
    }
    // .flex-box {
    //   position: relative;
    //   display: flex;
    //   margin-bottom: .2rem;
    //   &:last-of-type {
    //     margin-bottom: 0;
    //   }
    //   .xs4 {
    //     width: calc(4/12*100%);
    //   }
    //   .xs5 {
    //     width: calc(5/12*100%);
    //   }
    //   .xs7 {
    //     width: calc(7/12*100%);
    //   }
    //   .xs8 {
    //     width: calc(8/12*100%);
    //   }
    //   .xs12 {
    //     width: calc(12/12*100%);
    //   }
    //   h4 {
    //     position: relative;
    //     line-height: .27rem;
    //     padding-left: .1rem;
    //     &:before {
    //       position: absolute;
    //       top: 50%;
    //       left: 0;
    //       width: .04rem;
    //       height: .16rem;
    //       margin-top: -.07rem;
    //       content: '';
    //     }
    //   }
    // }
  }
}
.vflex {
  display: flex;
  .vcard {
    position: relative;
    width: 100%;
    height: 100%;
    .el-card__body {
      padding-top: .1rem !important;
    }
  }
}
.w70 {
  width: .7rem !important;
}
.w80 {
  width: .8rem !important;
}
.w96 {
  width: .96rem !important;
}
.elrate {
  display: inline-block;
  margin-left: -.03rem;
  vertical-align: unset;
}
.right {
  margin-right: .2rem !important;
}
.chart-box {
  padding: 0 .4rem;
}
.collect-icon {
  position: absolute;
  top: .2rem;
  right: .2rem;
  display: block;
  width: .4rem;
  height: .4rem;
  line-height: .4rem;
  border-radius: 50%;
  margin-left: .2rem;
  text-align: center;
  font-size: .2rem;
  color: #fff;
  background: #909399;
  cursor: pointer;
  &.highlight {
    font-size: .23rem;
    background: $mainColor;
  }
}
.tags {
  position: relative;
  margin-bottom: .1rem;
  .tag {
    display: inline-block;
    // height: .24rem;
    // line-height: .24rem;
    padding: .03rem .11rem;
    border-radius: 12px;
    margin: .02rem .1rem .03rem 0;
    font-weight: normal;
    font-size: .12rem;
    color: $mainColor;
    background-color: #e9e9fc;
    vertical-align: bottom;
  }
}
</style>